Este es mi código en el componente principal:
<div v-for="measurement in measurements" :key="measurement.id" > <graph-component :value="valueOfMeasurement(measurement)" ></graph-component> </div> Envío value de props al componente secundario graph-component . :value debe enviar la matriz al graph-component pero aparece un error You may have an infinite update loop in a component render function. .
Método valueOfMeasurement(measurement) es:
methods:{ valueOfMeasurement(measurement) { this.arrayOfValues.length=0; this.counter=0; for( this.counter;this.counter<this.message.feeds.length;this.counter++) { this.arrayOfValues.push(this.message.feeds[this.counter]["field" + measurement.fieldId]); } return this.arrayOfValues; } }Soy principiante en Vue.js y supongo que recibo este error porque presiono nuevos elementos en la matriz, pero no puedo encontrar otra forma de hacerlo.
Obtiene un posible bucle infinito porque está mutando el estado durante el renderizado. Específicamente, está llamando al método valueOfMeasurement durante el procesamiento (es decir, dentro de la plantilla) que está modificando el estado del componente ( this.arrayOfValues y this.counter ). Esto activará Vue para volver a renderizar nuevamente, lo que luego mutará el estado nuevamente, y así sucesivamente infinitamente.
¿Por qué arrayOfValues y counter están en estado local? Simplemente los está borrando cada vez que se llama al método de todos modos, por lo que parece que solo deberían ser variables locales dentro del método. Pero ... eso depende de si <graph-component> muta estas matrices; si es así, debe calcular previamente todos estos datos con anticipación fuera de la plantilla, tal vez cuando se establecen las measurements por primera vez o en el gancho created , etc.